import React, { forwardRef } from 'react';
import * as AvatarPrimitive from '@radix-ui/react-avatar';

// Avatar组件
const Avatar = forwardRef<HTMLDivElement, AvatarPrimitive.AvatarProps>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Root
    ref={ref}
    className={`relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full ${className}`}
    {...props}
  />
));

// AvatarImage组件
const AvatarImage = forwardRef<HTMLImageElement, AvatarPrimitive.AvatarImageProps>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Image
    ref={ref}
    className={`object-cover w-full h-full ${className}`}
    {...props}
  />
));

// AvatarFallback组件
const AvatarFallback = forwardRef<HTMLDivElement, AvatarPrimitive.AvatarFallbackProps>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Fallback
    ref={ref}
    className={`flex h-full w-full items-center justify-center rounded-full bg-muted text-muted-foreground ${className}`}
    {...props}
  />
));

// 设置displayName
Avatar.displayName = AvatarPrimitive.Root.displayName;
AvatarImage.displayName = 'AvatarImage';
AvatarFallback.displayName = 'AvatarFallback';

export { Avatar, AvatarImage, AvatarFallback };